<!-- 机构端-招聘人才-人才简历 -->
<template>
	<view class="resume-container">
		<!-- 用户基本信息 -->
		<view class="user-info">
			<view class="info-main">
				<view class="name-line">
					<text class="name">{{base_info.base.name}}</text>
					<!-- <text class="gender" @click="personInfo">编辑</text> -->
				</view>
				<view class="meta-info">
					<text class="gender">{{base_info.base.sex}}</text>
					<text>|</text>
					<text>{{base_info.base.birth}}</text>
					<text>|</text>
					<text>{{base_info.base.xueli}}</text>
					<text>|</text>
					<text>{{base_info.base.workindate}}</text>
				</view>
				<view class="contact-info">
					<u-icon name="phone"></u-icon>
					<text class="phone">{{base_info.base.phoneno}}</text>
					<u-icon name="weixin-fill"></u-icon>
					<text class="weixin">{{base_info.base.wxopenid}}</text>
				</view>
			</view>
			<view class="avatar-container">
				<image :src="base_info.base.header_img[0].url" class="avatar" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 求职意向 -->
		<view class="section">
			<view class="section-header">
				<text class="title">求职意向</text>
			</view>
			<view class="section-content">
				<view class="intention-item">
					<text class="label">期望职位：</text>
					<text>护理员、实习康养师</text>
				</view>
				<view class="intention-item">
					<text class="label">工作地点：</text>
					<text>福州、厦门</text>
				</view>
				<view class="intention-item">
					<text class="label">期望薪资：</text>
					<text>6K~10K</text>
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 个人介绍 -->
		<view class="section">
			<view class="section-header">
				<text class="title">个人介绍</text>
			</view>
			<view class="section-content">
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="base_info.personal.jlbi_personview"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 职业证书 -->
		<view class="section">
			<view class="section-header">
				<text class="title">职业证书</text>
			</view>
			<view class="certificates" v-for="(item,index) in base_info.zyzs" :key="index">
				<view class="cert-names">
					<text class="cert-name">{{item.jlzs_name}}({{item.jlzs_level}})</text>
					<!-- <text class="cert-name">XXXXXX 等级证书（A级）</text> -->
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 工作经历 -->
		<view class="section">
			<view class="section-header">
				<text class="title">工作经历</text>
			</view>
			<view class="section-content" v-for="(item,index) in base_info.gzjl" :key="item.jlgz_code">
				<view class="workSection">
					<text class="title">{{item.jlgz_gongsiname}}</text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlgz_zhiweiname}}</text>
					<text class="title-time">{{item.jlgz_indate}}~{{item.jlgz_outdate}}</text>
				</view>
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="item.jlgz_workdetail"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 行业荣誉 -->
		<view class="section" v-for="(item,index) in base_info.hyry" :key="item.jlry_code">
			<view class="section-header">
				<text class="title">行业荣誉</text>
			</view>
			<view class="section-content">
				<view class="workSection">
					<text class="title">{{item.jlry_name}}</text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlry_mingci}}</text>
					<text class="title-time">{{item.jlry_getdate}}</text>
				</view>
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="item.jlry_desc"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>
		<!-- 教育经历 -->
		<view class="section" v-for="(item,index) in base_info.jyjl" :key="item.jljy_code">
			<view class="section-header">
				<text class="title">教育经历</text>
			</view>
			<view class="section-content">
				<view class="workSection">
					<text class="title">{{item.jljy_school}}</text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jljy_zhuanye}}</text>
					<text class="title-time">{{item.jljy_indate}}-{{item.jljy_outdate}}</text>

				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 培训经历 -->
		<view class="section" v-for="(item,index) in base_info.pxjl" :key="item.jlpx_code">
			<view class="section-header">
				<text class="title">培训经历</text>
			</view>
			<view class="section-content">
				<view class="workSection">
					<text class="title">{{item.jlpx_school}}</text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlpx_zhuanye}}</text>
					<text class="title-time">{{item.jlpx_traindate}}</text>
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 空块 -->
		<view class="section">
			<view class="section-header">
				<text class="title"></text>
			</view>
			<view class="section-content">
				<view class="workSection">
					<!-- 	<text class="title"></text>		 -->
				</view>
				<view class="timeSection">
					<!-- 					<text class="title-name"></text>
					<text class="title-time"></text> -->
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="button-group">
			<u-button type="default" @click="saveDraft" shape="circle" :custom-style="customStyleObject">
				不合适
			</u-button>
			<u-button type="primary" @click="publishJob" shape="circle" :custom-style="btuStyle">
				邀请面试
			</u-button>
		</view>
		<!-- 底部弹出的面试邀请表单 -->
		<view class="popup-container">
			<u-popup v-model="showInvitePopup" mode="bottom" border-radius="20" :height="1000" closeable>
				<view class="invitation-popup">
					<view class="popup-header">
						<text class="title">邀请面试</text>
					</view>
					<scroll-view class="popup-content" scroll-y="true" style="height: 500rpx;">
						<!-- 弹窗内容 -->
						<!-- picker弹窗 -->
						<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>
						<!-- 表单区域 -->
						<view class="form-container">
							<u-form :model="form" ref="form">
								<!-- 面试岗位 -->
								<u-field v-model="form.inviteName" label="面试岗位：" label-width="160" prop="companyName"
									placeholder="请选岗位" :placeholder-style="placeholderStyle" @click="isShowPicker(0)">
								</u-field>
								<!-- 面试时间 -->
								<u-field v-model="form.inviteTime" label="面试时间：" label-width="160" placeholder="请选面试时间"
									:placeholder-style="placeholderStyle" @click="isShowPicker(1)">
								</u-field>
								<!-- 面试地址 -->
								<u-field v-model="form.inviteAddr" label="面试地址：" label-width="160" prop="companyName"
									placeholder="请输入详细地址" :placeholder-style="placeholderStyle">
								</u-field>
								<!-- 联系人 -->
								<u-field v-model="form.invitePersion" label="联系人：" label-width="160" prop="companyName"
									placeholder="请输入联系人" :placeholder-style="placeholderStyle">
								</u-field>
								<!-- 联系方式 -->
								<u-field v-model="form.invitePhone" label="联系方式：" label-width="160" prop="companyName"
									placeholder="请输入联系电话" :placeholder-style="placeholderStyle">
								</u-field>
								<!-- 微信号 -->
								<u-field v-model="form.inviteWx" label="微信号：" label-width="160" prop="companyName"
									placeholder="请输入微信号" :placeholder-style="placeholderStyle">
								</u-field>
							</u-form>
							<!-- 按钮组 -->
							<view class="button-group">
								<u-button type="primary" @click="handleSubmit" shape="circle" :loading="loading">
									发出邀请
								</u-button>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				loading: false,
				// 按钮组中的样式写法
				customStyleObject: {
					"marginRight": '20rpx',
					"color": '#FA4646'
				},
				expanded: false, // 控制个人介绍是否展开
				// 弹出窗口内容
				show: false,
				mode: "selector",
				range: ['康养师', '护理师', '健康顾问', '康复治疗师', '营养师'],
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,
				// 按钮样式
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				showInvitePopup: false,
				form: {
					inviteName: '',
					inviteTime: '',
					inviteAddr: '',
					invitePersion: '',
					invitePhone: '',
					inviteWx: ''
				},
				// 加载个人介绍
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #F1F7F7 80%)",
					paddingTop: "300rpx",
					marginTop: "-300rpx",

				},
				dictNode:[], ///字典根项
				jobName: [], ///岗位名称
			  tmpItem: {}, //临时存储ITEM项
				cyUserCode: '', ///传递过来的从业者usercode
				tdUserCode: '', ///传递过来的投递简历的tdusercode
				// 简历内容
				base_info: {
					base: {
						name: '',
						sex: '',
						birth: '',
						xueli: '',
						workindate: '',
						phoneno: '',
						wxopenid: '',
						header_img: ''
					},
					qz: {

					},
					// 个人介绍
					personal: {
						jlbi_personview: ''
					},
					zyzs: [],
					gzjl: [],
					hyry: [],
					jyjl: [],
					pxjl: []
				},
			}
		},
		onLoad(options) {
			this.cyUserCode = options.usercode
			this.tdUserCode = options.tdbcode
			console.log('收消息：',this.cyUserCode, this.tdUserCode)
		},
		onShow() {
			// 获取个人完整简历
			this.getResumeFull()
			// 获取字典根项
			this.selectdictNode()

		},
		methods: {
			// 获取个人完整简历
			getResumeFull() {
				// 获取个人完整简历
				this.$u.api.queryjlfull({
					usercode: this.cyUserCode
				}).then(res => {
					let baseInfo = res.data.base_info
					// 赋值个人信息
					this.base_info.base.name = baseInfo.base.jlbi_name;
					this.base_info.base.sex = baseInfo.base.jlbi_sex;
					this.base_info.base.birth = baseInfo.base.jlbi_birth;
					this.base_info.base.xueli = baseInfo.base.jlbi_xueli;
					// 工作年限需要计算
					const diff = util.calculateDateDifference(baseInfo.base.jlbi_workindate);
					if (diff.years == 0) {
						this.base_info.base.workindate = diff.months + '个月';
					} else if (diff.months == 0) {
						this.base_info.base.workindate = diff.years + '年';
					} else {
						this.base_info.base.workindate = diff.years + '年' + diff.months + '个月';
					}
					this.base_info.base.phoneno = baseInfo.base.jlbi_phoneno;
					this.base_info.base.wxopenid = baseInfo.base.jlbi_wxopenid;
					this.base_info.base.header_img = baseInfo.base.header_img_uri;
					// 求职意向
					// 个人介绍
					this.base_info.personal.jlbi_personview = baseInfo.personal.jlbi_personview;
					// 职业证书
					this.base_info.zyzs = baseInfo.zyzs;
					// 工作经历
					this.base_info.gzjl = baseInfo.gzjl;
					// 行业荣誉
					this.base_info.hyry = baseInfo.hyry;
					// 教育经历
					this.base_info.jyjl = baseInfo.jyjl;
					// 培训经历
					this.base_info.pxjl = baseInfo.pxjl;
					console.log('个人简历-1：', this.base_info)
				})
				
			},	
					
			// 加载字典开始
			selectdictNode() {
				this.$u.api.querydict({
					"dictcode": "0"
				}).then(res => {
					console.log('根项字典',res)
					this.dictNode = res.data.base_info
					this.selectItem()
				})
			},
			// 查询字典项
			async selectItem() {
				// 查询岗位名称
				this.tmpItem = {} 
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '岗位名称')
				let returnItemjobName = []
				returnItemjobName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobName.length; i++) {
					this.jobName.push(returnItemjobName[i].dict_name)
				}
				console.log('tmpItem-1:', this.jobName);
							
			},
			
			selectItemApi(itemcode,backcall) {
				return this.$u.api.querydict({
					"dictcode": itemcode
				}).then(res => res.data.base_info)	
			},
			// 加载字典结束		
					
					
			
			// 邀请面试弹窗
			publishJob() {
				// uni.navigateTo({
				// 	url: '/pages/invite/invite-invitation'
				// });
				this.showInvitePopup = true;
			},
			// 发出邀请
			handleSubmit() {
				// 邀请接口
				this.$u.api.createjgyqms({
					"tdbcode": this.tdUserCode, //#投递简历code
					"tdyqgwname": this.form.inviteName, //#岗位名称
					"tdyqmsdate": this.form.inviteTime, //#面试时间
					"tdyqmsaddr": this.form.inviteAddr, //#面试地点
					"tdyqmsusername": this.form.invitePersion, //#面试人姓名
					"tdyqmsphoneno": this.form.invitePhone, ///#面试人电话
					"tdyqmswxid": this.form.inviteWx, ///#面试人微信号
				}).then(res => {
					console.log('邀请面试：', res)
					this.showInvitePopup = false;	
				})
				// 改变状态为已邀请
				this.$u.api.updatetdjl({
					tdbcode: this.tdUserCode,  ///#从业者投递后的简历流程code
					tdbstate: "3"  ///#0未读，1已读，2不合适，3邀请面试
				}).then(res => {
					console.log('改变状态：', res)				
				})
			},
			// 弹窗
			// 选择岗位
			selectPosition(e) {
				this.form.position = this.positionOptions[e[0]]
				this.showPositionPicker = false
			},
			// 选择时间
			selectTime(e) {
				this.form.interviewTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
				this.showTimePicker = false
			},
			// 提交邀请
			submitInvitation() {
				if (!this.validateForm()) return

				// 这里可以调用API发送邀请
				console.log('提交邀请:', this.form)
				this.$u.toast('邀请已发送')
				this.resetForm()
				this.showInvitePopup = false
			},
			// 表单验证
			validateForm() {
				if (!this.form.position) {
					this.$u.toast('请选择面试岗位')
					return false
				}
				if (!this.form.interviewTime) {
					this.$u.toast('请选择面试时间')
					return false
				}
				if (!this.form.address) {
					this.$u.toast('请输入面试地址')
					return false
				}
				if (!this.form.contactPerson) {
					this.$u.toast('请输入联系人')
					return false
				}
				if (!this.form.contactPhone) {
					this.$u.toast('请输入联系电话')
					return false
				}
				if (!/^1[3-9]\d{9}$/.test(this.form.contactPhone)) {
					this.$u.toast('请输入正确的手机号码')
					return false
				}
				return true
			},
			// 重置表单
			resetForm() {
				this.form = {
					position: '',
					interviewTime: '',
					address: '',
					contactPerson: '',
					contactPhone: ''
				}
			},
			// 显示经营类型弹窗
			isShowPicker(value) {
				if (value == 0) {
					this.NumberValue = value;
					this.mode = "selector";
					this.range = this.jobName;
					// this.defaultSelector = [0];
				} else if (value == 1) {
					this.NumberValue = value;
					this.mode = "time";
					// this.range = ['营业中', '暂停营业'];
					// this.defaultSelector = [0];
				} else {
					this.NumberValue = value;
					this.mode = "region"
					// this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
					// this.defaultSelector = [0, 0, 0];
				}
				this.show = true
			},
			
			// picker弹确认
			// 选择确认
			confirm(e) {
				if (this.NumberValue == 0) {
					this.form.inviteName = this.range[e[0]]
				} else if(this.NumberValue == 1) {
					// this.form.businessAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;
					this.form.inviteTime = e.year+'-'+e.month+'-'+e.day;
				} else {
					this.form.education = c
				}
			},		
			// 不合适
			saveDraft() { 
				// 更新是否已读状态		
				this.$u.api.updatetdjl({
					tdbcode: this.tdUserCode, ///#从业者投递后的简历流程code
					tdbstate: "2" ///#0未读，1已读，2不合适，3邀请面试
				}).then(res => {
					console.log('改变状态-不合适：', res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.resume-container {
		// padding: 30rpx;
		background-color: #F1F7F7;
		// min-height: 160vh;

		.user-info {
			display: flex;
			background-color: #F1F7F7;
			border-radius: 16rpx;
			padding: 30rpx;
			// margin-bottom: 5rpx;

			.avatar-container {
				margin-right: 30rpx;

				.avatar {
					// 2寸照片的宽、高
					// width: 200px;
					// height: 280px;
					// 1寸照片的宽、高
					// width: 74px;
					// height: 99px;
					// border-radius: 50%;
					// background-color: #03B8CD;
					// border: 2rpx solid #f0f0f0;
					width: 120rpx;
					height: 160rpx;
					background: #E9F3FD;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.info-main {
				flex: 1;

				.name-line {
					display: flex;
					align-items: center;
					// margin-bottom: 30rpx;

					.name {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}

					.gender {
						font-size: 24rpx;
						color: #2979ff;
						background-color: #F1F7F7;
						padding: 4rpx 15rpx;
						border-radius: 20rpx;
					}
				}

				.meta-info {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666;
					// margin-bottom: 30rpx;

					text {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.contact-info {
					.phone {
						// display: block;
						font-size: 26rpx;
						color: #666;
						// margin-bottom: 8rpx;
						margin-right: 10px;

						&:last-child {

							margin-bottom: 0;
						}
					}
				}
			}
		}

		.section {
			background-color: #F1F7F7;
			border-radius: 16rpx;
			padding: 30rpx;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				// border-bottom: 1rpx solid #f0f0f0;			


				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.status {
					font-size: 26rpx;
					color: #03B8CD;
				}
			}



			.section-content {
				.intention-item {
					display: flex;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 15rpx;

					.label {
						color: #333;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}


				.intro-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;

					&.collapsed {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}

				.expand-btn {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #2979ff;
					font-size: 26rpx;
					margin-top: 15rpx;

					.u-icon {
						margin-left: 8rpx;
					}
				}
			}

			// 个人证书样式
			.certificates {
				.cert-row {
					margin-bottom: 20rpx;
				}

				.cert-names {
					// flex 通过 flex-direction 改变排列样式
					display: flex;
					flex-direction: column;

					.cert-name {
						width: 48%;
						font-size: 26rpx;
						color: #666;
						text-align: center;
					}
				}
			}
		}

		// 岗位与时间
		.timeSection {
			margin: 10px 0;

			.title-name {
				margin-right: 20px;
			}
		}


		.button-group {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			background-color: #F1F7F7;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			// 此样式主要为了适配wx小程序的按钮
			/deep/ .u-size-default {
				width: 150px;
			}

			.u-btn {
				flex: 1;

				&:first-child {
					margin-right: 20rpx;
				}
			}
		}

		// 弹窗
		.popup-container {
			margin: 10px 10px;
			// background-color: #F1F7F7;

			.invitation-popup {
				// height: 70vh;
				display: flex;
				flex-direction: column;
				width: 93%;
				// background-color: #F1F7F7;
				// margin-right:30px;

				.popup-header {
					padding: 30rpx;
					text-align: center;
					// border-bottom: 1rpx solid #f5f5f5;

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.popup-content {
					flex: 1;
					padding: 30rpx;
					overflow-y: auto;
				}

				.popup-footer {
					padding: 20rpx;
					// border-top: 1rpx solid #f5f5f5;
				}

				.form-item {
					// margin-bottom: 30rpx;

					.item-label {
						display: block;
						// margin-bottom: 10rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}
				}

				/deep/ .u-input {
					padding: 20rpx;
					background-color: #F1F7F7;
					border-radius: 8rpx;
				}
			}

			// 新弹窗
			.form-container {
				background: #F1F7F7;
				padding: 20rpx;
				border-radius: 12rpx;

				/deep/ .u-field {
					padding: 10px 0;
				}

				/deep/ .u-form-item__label {
					.required {
						color: #f56c6c;
						margin-right: 4rpx;
					}
				}

				.upload-section {
					margin-bottom: 40rpx;

					.upload-title {
						font-size: 28rpx;
						color: #606266;
						margin-bottom: 16rpx;
						display: block;

					}
				}

				// 选择是否参加
				.checkbox-container {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0;
					line-height: 16px;
				}


				.text-container {
					background-color: #F1F7F7;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					font-size: 8px;
				}

				.button-group {
					display: flex;
					justify-content: space-between;
					margin-top: 60rpx;

					// 此样式主要为了适配wx小程序的按钮
					/deep/ .u-size-default {
						width: 350px;
					}

					.u-btn {
						flex: 1;
					}
				}
			}

		}

	}
</style>